<div class="metrics mar-top-xl" ng-if="pod || deployment">
  <div ng-show="!metricsError" class="metrics-options">
    <div class="pull-right learn-more-block hidden-xs">
      <a href="" ng-click="showComputeUnitsHelp()">About Compute Resources</a>
    </div>
    <!-- Let the user select the container if we're showing pod metrics. -->
    <div ng-if="pod.spec.containers.length" class="form-group">
      <label for="selectContainer">Container:</label>
      <div class="select-container" ng-class="{ 'multiple-containers' : pod.spec.containers.length > 1 }">
        <span ng-show="pod.spec.containers.length === 1">
          {{pod.spec.containers[0].name}}
        </span>
        <ui-select ng-init="options.selectedContainer = pod.spec.containers[0]" ng-show="pod.spec.containers.length > 1" ng-model="options.selectedContainer" input-id="selectContainer">
          <ui-select-match>{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="container in pod.spec.containers | filter : { name: $select.search }">
            <div ng-bind-html="container.name | highlight : $select.search"></div>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>
    <div class="form-group">
      <label for="timeRange">Time Range:</label>
      <div class="select-range">
        <ui-select ng-model="options.timeRange" search-enabled="false" ng-disabled="metricsError" input-id="timeRange">
          <ui-select-match>{{$select.selected.label}}</ui-select-match>
          <ui-select-choices repeat="range in options.rangeOptions">
            {{range.label}}
          </ui-select-choices>
        </ui-select>
      </div>
    </div>
  </div>

  <ellipsis-pulser color="dark" size="sm" msg="Loading metrics" ng-if="!loaded"></ellipsis-pulser>

  <div ng-if="loaded && noData && !metricsError" class="mar-top-md">No metrics to display.</div>

  <div ng-if="metricsError" class="empty-state-message text-center">
    <h2>
      <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
      Metrics are not available.
    </h2>

    <p>
      An error occurred getting metrics<span ng-if="options.selectedContainer.name">
        for container {{options.selectedContainer.name}}</span><span ng-if="metricsURL">
        from <a ng-href="{{metricsURL}}">{{metricsURL}}</a></span>.
    </p>

    <p class="text-muted">
      {{metricsError.details}}
    </p>
  </div>

  <div ng-repeat="metric in metrics" ng-if="!noData && !metricsError" class="metrics-full">
    <h2 ng-class="{ 'has-limit': metric.datasets[0].total }">
      {{metric.label}}
      <small ng-if="pod.spec.containers.length > 1">
        <span ng-if="metric.containerMetric">Container Metrics</span>
        <span ng-if="!metric.containerMetric">Pod Metrics</span>
      </small>
     </h2>

    <!-- Show a summary of usage above the charts like the patternfly utilization card. -->
    <!-- Reuse the utilization card styles, but only here. -->
    <div ng-if="metric.datasets[0].total" class="utilization-trend-chart-pf">
      <div class="current-values">
        <div ng-if="metric.datasets[0].available >= 0">
          <h1 class="available-count pull-left">
            {{metric.datasets[0].available}}
          </h1>
          <div class="available-text pull-left">
            <div>Available of</div>
            <div>{{metric.datasets[0].total}} {{metric.units}}</div>
          </div>
        </div>
        <div ng-if="metric.datasets[0].available < 0">
          <h1 class="available-count pull-left">
            {{metric.datasets[0].available | abs}}
          </h1>
          <div class="available-text pull-left">
            <div><strong>Over limit of</strong></div>
            <div>{{metric.datasets[0].total}} {{metric.units}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Clear floats so top margin works on the charts below. -->
    <div style="clear: both;"></div>

    <div class="row">
      <!-- Donut -->
      <div ng-if="metric.datasets[0].total" ng-class="{ 'col-sm-12 col-md-3 col-md-push-9': !stackDonut }">
        <div ng-attr-id="{{metric.chartPrefix + uniqueID}}-donut" class="metrics-donut"></div>
      </div>

      <!-- Sparkline -->
      <div class="col-sm-12" ng-class="{ 'col-md-9': hasLimits && !stackDonut, 'col-md-pull-3': metric.datasets[0].total && !stackDonut}">
        <div ng-attr-id="{{metric.chartPrefix + uniqueID}}-sparkline" class="metrics-sparkline"></div>
      </div>
    </div>
  </div>
</div>
